<template>
  <div class="container">
    <div style="width:270px;float:left;">
      <div class="borderBox">
        <div class="hd">
          <el-button type="primary" size="mini" @click="showAddDep">新增</el-button>
          <el-button type="primary" size="mini" @click="showDeleteDep">删除</el-button>
          <el-button type="primary" size="mini" @click="showEditDep">修改</el-button>
        </div>
        <div class="bd">
          <el-tree
            class="tree"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
      </div>
    </div>
    <el-dialog title="新增部门" :visible.sync="dialogAddDepVisible" width="500px">
      <el-form :model="addDepParam">
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="addDepParam.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddDepVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddDep">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改部门" :visible.sync="dialogEditDepVisible" width="500px">
      <el-form :model="editDepParam">
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input v-model="editDepParam.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditDepVisible = false">取 消</el-button>
        <el-button type="primary" @click="onEditDep">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title :visible.sync="dialogDeleteDepVisible" width="350px">
      <div>确定要删除该部门吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteDepVisible = false">取 消</el-button>
        <el-button type="primary" @click="onDeleteDep">确 定</el-button>
      </div>
    </el-dialog>
    <div style="margin-left:270px;">
      <el-form :inline="true" class="tableSearchBox" size="medium">
        <el-form-item class="fr" style="padding-right:10px;">
          <el-button type="primary" icon="el-icon-plus" @click="showAddDepartment">新增</el-button>
        </el-form-item>
      </el-form>
      <PagesTable
        :tableHeader="tableHeader"
        :tableData="tableData"
        :tablePagination="tablePagination"
        :tableOperation="tableOperation"
        @pageSize="pageSizeChange"
        @currentPage="currentPageChange"
        @pageOperation="handlePageOperation"
      />
    </div>
    <el-dialog title="新增部门单元" :visible.sync="dialogAddVisible" width="500px">
      <el-form :model="addParam">
        <el-form-item label="部门单元" :label-width="formLabelWidth">
          <el-input v-model="addParam.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单元编号" :label-width="formLabelWidth">
          <el-input v-model="addParam.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单元地址" :label-width="formLabelWidth">
          <el-input v-model="addParam.addr" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="onAddDepartment">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="修改单元信息" :visible.sync="dialogEditVisible" width="500px">
      <el-form :model="editParam">
        <el-form-item label="部门单元" :label-width="formLabelWidth">
          <el-input v-model="editParam.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单元编号" :label-width="formLabelWidth">
          <el-input v-model="editParam.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="单元地址" :label-width="formLabelWidth">
          <el-input v-model="editParam.addr" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditVisible = false">取 消</el-button>
        <el-button type="primary" @click="onEditDepartment">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title :visible.sync="dialogDeleteVisible" width="350px">
      <div>确定要删除该单元吗?</div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogDeleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="onDeleteDepartment">确 定</el-button>
      </div>
    </el-dialog>
    <div class="clear"></div>
  </div>
</template>


<script>
import PagesTable from "../../components/PagesTable.vue";

export default {
  components: {
    PagesTable
  },
  data() {
    return {
      tableHeader: [
        { name: "部门单元", mark: "id", minWidth: "90" },
        { name: "单元编码", mark: "code", minWidth: "90" },
        { name: "单元地址", mark: "addr", minWidth: "90" },
        { name: "操作", mark: "", width: "150" }
      ],
      tableOperation: [
        { name: "编辑", mark: "edit", icon: true },
        { name: "删除", mark: "delete", icon: true }
      ],
      tablePagination: { show: true, current: 1, size: 10, total: 0 },
      tableData: [],
      tableDataAll: [],
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      departmentRow: "",
      dialogAddDepVisible: false,
      addDepParam: { name: "" },
      dialogEditDepVisible: false,
      editDepParam: { id: "", name: "" },
      dialogDeleteDepVisible: false,
      deleteDepParam: { id: "" },
      dialogAddVisible: false,
      addParam: { id: "", code: "", addr: "" },
      dialogEditVisible: false,
      editParam: { id: "", code: "", addr: "" },
      dialogDeleteVisible: false,
      deleteParam: { id: "" },
      formLabelWidth: "90px",
      rowIndex: null
    };
  },
  mounted() {
    // this.handleDepartmentList();
  },
  methods: {
    handleNodeClick(data) {
      const self = this;
      self.departmentRow = data;
      self.handleDepartmentData();
    },
    handleDepartmentList() {
      const self = this;
      self.$axios.post("/service/a0000011/g5h2nb2h").then(res => {
        if (res.data.status === "success") {
          self.treeData = res.data.res;
        } else {
          self.$message(res.data.res);
        }
      });
    },
    handleDepartmentData() {
      const self = this;
      let param = { id: self.departmentRow.id };
      self.$axios
        .post("/service/a0000011/zfyqgq82", param)
        .then(res => {
          if (res.data.status === "success") {
            self.tableDataAll = res.data.res;
            self.tablePagination.total = self.tableDataAll.length;
            self.handleTableData();
          } else {
            self.$message(res.data.res);
          }
        })
        .catch(function(error) {
          self.tableDataAll = [];
          self.tablePagination.total = self.tableDataAll.length;
          self.handleTableData();
        });
    },
    handleTableData() {
      const self = this;
      self.tableData = [];
      let i = (self.tablePagination.current - 1) * self.tablePagination.size;
      let j = self.tablePagination.current * self.tablePagination.size;
      if (j > self.tablePagination.total) {
        j = self.tablePagination.total;
      }
      for (i; i < j; i++) {
        self.tableData.push(self.tableDataAll[i]);
      }
    },
    pageSizeChange(data) {
      this.tablePagination.size = data;
      this.handleTableData();
    },
    currentPageChange(data) {
      this.tablePagination.current = data;
      this.handleTableData();
    },
    showAddDep() {
      const self = this;
      self.dialogAddDepVisible = true;
      self.addDepParam.name = "";
    },
    onAddDep() {
      const self = this;
      if (self.addDepParam.name === "") {
        self.$message("请输入部门名称");
      } else {
        let addRow = {
          id: self.treeData.length + 10,
          name: self.addDepParam.name
        };
        self.$message("添加部门成功！");
        self.treeData.push(addRow);
        self.dialogAddDepVisible = false;
        // self.$axios.post("/service/a0000011/", self.addDepParam).then(res => {
        //   self.$message(res.data.res);
        //   self.handleDepartmentList();
        //   self.dialogAddDepVisible = false;
        //   self.addDepParam.name = "";
        // });
      }
    },
    showEditDep() {
      const self = this;
      if (self.departmentRow) {
        self.dialogEditDepVisible = true;
        self.editDepParam.id = self.departmentRow.id;
        self.editDepParam.name = self.departmentRow.name;
      } else {
        self.$message("请选择修改部门！");
      }
    },
    showDeleteDep() {
      const self = this;
      if (self.departmentRow) {
        self.dialogDeleteDepVisible = true;
        self.deleteDepParam.id = self.departmentRow.id;
      } else {
        self.$message("请选择删除部门！");
      }
    },
    onEditDep() {
      const self = this;
      self.$message("修改成功！");
      for (let i in self.treeData) {
        if (self.treeData[i].id === self.editDepParam.id) {
          self.treeData[i].id = self.editDepParam.id;
          self.treeData[i].name = self.editDepParam.name;
          self.dialogEditDepVisible = false;
          self.handleTableData();
          break;
        }
      }
      // self.$axios.post("/service/a0000011/", self.editDepParam).then(res => {
      //   self.$message(res.data.res);
      //   self.handleDepartmentList();
      //   self.dialogEditDepVisible = false;
      // });
    },
    onDeleteDep() {
      const self = this;
      self.$message("删除成功！");
      for (let i in self.treeData) {
        if (self.treeData[i].id === self.deleteDepParam.id) {
          self.treeData.splice(i, 1);
          self.dialogDeleteDepVisible = false;
          self.departmentRow = "";
          break;
        }
      }
      // self.$axios.post("/service/a0000011/", self.deleteDepParam).then(res => {
      //   self.$message(res.data.res);
      //   self.handleDepartmentList();
      //   self.dialogDeleteDepVisible = false;
      // });
    },
    handlePageOperation(row, mark, index) {
      const self = this;
      self.rowIndex = index;
      if (mark === "edit") {
        self.dialogEditVisible = true;
        self.editParam.id = row.id;
        self.editParam.code = row.code;
        self.editParam.addr = row.addr;
      } else if (mark === "delete") {
        self.dialogDeleteVisible = true;
        self.deleteParam.id = row.id;
      }
    },
    showAddDepartment() {
      const self = this;
      self.dialogAddVisible = true;
      self.addParam.id = "";
      self.addParam.code = "";
      self.addParam.addr = "";
    },
    onAddDepartment() {
      const self = this;
      if (self.addParam.id === "") {
        self.$message("请输入部门单元");
      } else if (self.addParam.code === "") {
        self.$message("请输入单元编号");
      } else if (self.addParam.addr === "") {
        self.$message("请输入单元地址");
      } else {
        let addRow = {
          id: self.addParam.id,
          code: self.addParam.code,
          addr: self.addParam.addr
        };
        self.$message("添加成功！");
        self.tableDataAll.push(addRow);
        self.dialogAddVisible = false;
        self.tablePagination.total = self.tableDataAll.length;
        self.handleTableData();
        // self.$axios.post("/service/a0000011/", self.addParam).then(res => {
        //   self.$message(res.data.res);
        //   self.handleDepartmentData();
        //   self.dialogAddVisible = false;
        //   self.addParam.id = "";
        //   self.addParam.code = "";
        //   self.addParam.addr = "";
        // });
      }
    },
    onEditDepartment() {
      const self = this;
      self.$message("修改成功！");
      self.tableDataAll[self.rowIndex].id = self.editParam.id;
      self.tableDataAll[self.rowIndex].code = self.editParam.code;
      self.tableDataAll[self.rowIndex].addr = self.editParam.addr;
      self.dialogEditVisible = false;
      self.handleTableData();
      // self.$axios.post("/service/a0000011/", self.editParam).then(res => {
      //   self.$message(res.data.res);
      //   self.handleDepartmentData();
      //   self.dialogEditVisible = false;
      // });
    },
    onDeleteDepartment() {
      const self = this;
      self.$message("删除成功！");
      self.tableDataAll.splice(self.rowIndex, 1);
      self.dialogDeleteVisible = false;
      self.tablePagination.total = self.tableDataAll.length;
      self.handleTableData();
      // self.$axios.post("/service/a0000011/", self.deleteParam).then(res => {
      //   self.$message(res.data.res);
      //   self.handleDepartmentData();
      //   self.dialogDeleteVisible = false;
      // });
    }
  }
};
</script>
